<template>
  <div class="map-static-detail">
    <button type="button" class="detail__close" @click="close"></button>
    <transition name="fade" mode="out-in">
      <div
        class="map-static-detail__wrapper"
        :key="currentIndex"
        @touchstart="onTouchstart"
        @touchend="onTouchend"
        v-if="currObj"
      >
        <div class="detail__image">
          <img
            v-if="currObj.image"
            :src="currObj.image"
            :alt="currObj.alt || currObj.title"
          />
          <img v-else :src="dummy.image" :alt="currObj.alt || currObj.title" />
        </div>
        <div class="detail__content">
          <h6 v-if="currObj.title" class="detail__title me-md-5">
            {{ currObj.title }}
          </h6>
          <div
            v-if="currObj.desc"
            class="detail__desc me-md-5"
            v-html="currObj.desc"
          ></div>
          <ul class="detail__cta">
            <li v-if="currObj.phone">
              <a
                :href="`tel:${currObj.phone}`"
                class="detail__cta__item link-body-p link--udrline"
                >{{ currObj.phone }}</a
              >
            </li>
            <li v-if="currObj.email">
              <a
                :href="`mailto:${currObj.email}`"
                class="detail__cta__item link-body-p link--udrline"
                >{{ currObj.email }}</a
              >
            </li>
          </ul>
          <div class="detail__link" v-if="currObj.link">
            <!-- todo动态三角按钮 -->
          </div>
        </div>
      </div>
    </transition>

    <template v-if="list.length > 1">
      <button
        type="button"
        class="map-static-detail__btn-prev i"
        @click="currentIndex -= 1"
      ></button>
      <button
        type="button"
        class="map-static-detail__btn-next i"
        @click="currentIndex += 1"
      ></button>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { ref, computed, watch } from "vue";

interface ComponentProps {
  list?: Array<{
    title?: string;
    desc?: string;
    image?: string;
    alt?: string;
    phone?: string;
    email?: string;
    link?: string;
    linkName?: string;
  }>;
}

interface Props {
  componentProps?: ComponentProps | null;
}

const props = withDefaults(defineProps<Props>(), {
  componentProps: null,
});

const emit = defineEmits<{
  close: [];
}>();

const currentIndex = ref(0);
const touchstartX = ref(0);
const touchendX = ref(0);

const dummy = {
  title: "Title",
  desc: "description",
  image: "/images/dummyimage/placeholder.jpg",
  phone: "+852 2338 0264",
  email: "enquiry@hk.ycef.com",
  link: "#",
  linkName: "Vist School website",
};

const list = computed(() => {
  return props.componentProps?.list ?? [];
});

const currObj = computed(() => {
  return list.value?.[currentIndex.value] ?? list.value[0];
});

watch(currentIndex, (nVal) => {
  if (nVal > list.value.length - 1) {
    currentIndex.value = 0;
  } else if (nVal < 0) {
    currentIndex.value = list.value.length - 1;
  }
});

const close = () => {
  emit("close");
  setTimeout(() => {
    currentIndex.value = 0;
  }, 300);
};

const onTouchstart = (e: TouchEvent) => {
  touchstartX.value = e.changedTouches[0].screenX;
};

const onTouchend = (e: TouchEvent) => {
  touchendX.value = e.changedTouches[0].screenX;
  handleGesture();
};

const handleGesture = () => {
  if (touchendX.value < touchstartX.value) currentIndex.value += 1;
  if (touchendX.value > touchstartX.value) currentIndex.value -= 1;
};
</script>

<style lang="sass" scoped>
// Variables
$neutral-lightest: rgba(255,255,255,1)
$neutral-light: #F7F7FA
$neutral: #E4E4E6
$neutral-dark: #C0C0C4
$blue: #0048E8
$box-shadow-sm: 0 0 10px 0 rgba(130, 130, 140, 0.12)
$box-shadow-lg: 0 8px 32px 0 rgba(130, 130, 140, 0.24)

// Mixins
@mixin media-breakpoint-down($breakpoint)
    @if $breakpoint == md
        @media (max-width: 767.98px)
            @content

@mixin bg-image($img, $background-position: center, $background-size: cover, $background-color: rgba(255, 255, 255, 0))
    background-image: url('#{$img}')
    background-position: $background-position
    background-size: $background-size
    background-repeat: no-repeat
    background-color: $background-color

@mixin tx-body-small
    font-size: 14px
    font-weight: 400
    line-height: 1.428
    @include media-breakpoint-down(md)
        font-size: 13px
        line-height: 1.33
        letter-spacing: 0.02em

@mixin text-link
    color: $blue
    text-decoration: none
    background-image: linear-gradient(to right, $blue, $blue)
    background-size: 0 1px, 100% 1px
    background-position: 0 100%, 100% 100%
    background-repeat: no-repeat
    transition: background-size .3s
    padding-bottom: 2px
    &:hover,
    &:focus
        background-size: 100% 1px, 0 1px

@mixin line-clamp($num, $overflow: ellipsis)
    display: -webkit-box
    -webkit-line-clamp: $num
    -webkit-box-orient: vertical
    overflow: hidden
    text-overflow: $overflow

.map-static-detail
    pointer-events: visible
    position: relative
    background: $neutral-lightest
    padding: 20px 24px
    box-shadow: $box-shadow-sm
    border-radius: 8px
    @include media-breakpoint-down(md)
        padding: 12px
        border-radius: 4px
        box-shadow: $box-shadow-lg
    .fade-enter-active,
    .fade-leave-active
        transition: opacity .25s ease-out
    .fade-enter,
    .fade-leave-to
        opacity: 0
    .fade-enter-to,
    .fade-leave
        opacity: 1
    &__wrapper
        display: flex
        @include media-breakpoint-down(md)
            flex-direction: column
    .detail__close
        position: absolute
        right: 15px
        top: 15px
        width: 20px
        height: 20px
        border: none
        background: none
        outline: none
        @include bg-image('@/assets/icon-timer-cross.svg')
        @include media-breakpoint-down(md)
            right: 16px
            top: 19px
            background-image: url('@/assets/icon-cross-circle-light.svg')
            background-size: 100% auto
    .detail__image
        max-width: 231px
        margin-right: 24px
        @include media-breakpoint-down(md)
            max-width: 272px
            margin-right: 0
            margin-bottom: 12px
        img
            width: 100%
            height: auto
            @include media-breakpoint-down(md)
                max-height: 130px
                object-fit: cover
    .detail__content
        max-width: 352px
        @include media-breakpoint-down(md)
            max-width: 263px
        .detail__title
            color: #0032A0
        .detail__desc,
        .detail__desc :deep(p)
            @include tx-body-small
        .detail__desc :deep(a)
            @include text-link
        .detail__desc
            margin-top: 12px
            @include media-breakpoint-down(md)
                margin-top: 8px
                @include line-clamp(5)
    .detail__cta
        display: flex
        margin-top: 8px
        li
            display: flex
            align-items: center
            justify-content: space-between
            &:not(:last-child)
                .detail__cta__item
                    margin-right: 14.5px
                &::after
                    content: ''
                    width: 1px
                    height: 17px
                    background-color: $neutral
            &:not(:first-child)
                .detail__cta__item
                    margin-left: 12px
    .detail__link
        margin-top: 12px

    &__btn-prev,
    &__btn-next
        position: absolute
        top: 50%
        transform: translateY(-50%)
        border: none
        background: none
        padding: 0
        &::before
            width: 20px
            height: 20px
            background: url("@/assets/icon-tab-arrow.svg") center center no-repeat
            background-size: 100% auto
            @include media-breakpoint-down(md)
                width: 32px
                height: 32px
    &__btn-prev
        left: 3px
        @include media-breakpoint-down(md)
            left: -36px
        &::before
            transform: scale(-1)
    &__btn-next
        right: 4px
        @include media-breakpoint-down(md)
            right: -36px
</style>
